<template>
  <div ref="chartRef" style="width: 100%; height: 210px"/>
  <Dialog :arrList="arrList" :fathUrl="fathUrl"  :visible="visible"
    dataChange="4"
    @close="visible = false" title="数据目录数">
  </Dialog>
</template>

<script setup>
import Dialog from '../../../../components/right/components/Dialog.vue';
import {ref, onMounted, watch, nextTick} from "vue";
import {useEcharts} from "../../../../hook/ useEcharts";
import * as echarts from "echarts";

const {chartRef, initChart, updateChart,setClickHandler} = useEcharts();
const props = defineProps({
  value: {
    type: Object,
    default: () => ({xData: [], catalogue: [], dataCount: []}),
  },
  curCatalogue: {
    type: Number,
    default: 1
  }
});
const visible = ref(false);
const option = {
  tooltip: {
    trigger: 'item',
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  grid: {
    left: '2%',
    right: '1%',
    bottom: '10%',
    top: '20%',
    containLabel: true
  },
  legend: {
    data: ['数据目录数(个)', '数据条数(条)'],
    top: '5%',
    textStyle: {
      color: "#fff"
    },
    itemWidth: 15,
    itemHeight: 10,
  },
  dataZoom: [
    {
      type: 'slider',
      show: true,
      height: '10px',
      bottom: '10px',
      left: '10%',
      right: '10%',
      zoomLoxk: true,
      showDetail: false,
      borderColor: '#8FDFFE',
      backgroundColor: '#8fdffe99',
      handleColor: '#8FDFFE',
      handleSize: 20,
      handleStyle: {
        borderColor: '#8FDFFE',
        shadowBlur: 4,
        shadowOffsetX: 1,
        shadowOffsetY: 1,
        shadowColor: '#e5e5e5'
      },
      start: 0,
      end: 30
    }
  ],
  xAxis: {
    type: 'category',
    data: props.value.xData,
    show: false,
    axisLine: {
      lineStyle: {
        color: '#0444AD'
      }
    },
    axisLabel: {
      textStyle: {
        color: "#fff"
      }
    },
    axisTick: {
      show: false,
    },
  },
  yAxis: [{
    type: 'value',
    //name: "单位：个",
    nameTextStyle: {
      color: "#fff"
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: '#cdd5e2'
      }
    },
    splitLine: {
      show: false,
    },
    axisLabel: {
      textStyle: {
        color: "#fff"
      }
    },
  },
    {
      type: "value",
      axisLine: {
        lineStyle: {
          color: '#cdd5e2'
        }
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: true,
        formatter: "{value} ", //右侧Y轴文字显示
        textStyle: {
          color: "#fff"
        }
      }
    }
  ],
  series: [{
    name: '数据目录数(个)',
    type: 'bar',
    barWidth: '12px',
    itemStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#3C7DFB'
        }, {
          offset: 1,
          color: '#0A285F'
        }]),
        barBorderRadius: 5,
      },
    },
    data: props.value.catalogue || []
  }, {
    name: "数据条数(条)",
    type: "line",
    yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
    smooth: false, //平滑曲线显示
    symbol: "circle", //标记的图形为实心圆
    symbolSize: 5, //标记的大小
    itemStyle: {
      normal: {
        color: '#FFD15C',
        shadowColor: '#fff',
        shadowBlur: 10,
      },
    },
    lineStyle: {
      color: "#ffa43a"
    },

    data: props.value.dataCount || []
  }
  ]
};

watch(() => {
  return props.value
}, (newVal) => {
  updateChart({
    xAxis: {
      data: newVal.xData
    },
    series: [{
      data: newVal.catalogue
    }, {
      data: newVal.dataCount
    }
    ]
  })
}, {deep: true})
const fathUrl = ref('')
const arrList = ref([])
const handleChartClick = () => {
  console.log(props.curCatalogue, 33);
  if(props.curCatalogue == 2) {
    arrList.value = [
    {
      prop: "name",
      label: "目录名称",
      width: "80",
    },
    {
      prop: "value",
      label: "编目日期",
      width: "80",
    },]
    visible.value = true
    fathUrl.value = '/zjjscApi/dataTable/getdirectoriesNumberMx'
  }
}

onMounted(() => {
  // 初始化图表
  initChart(option);
  setClickHandler(handleChartClick)
});

</script>

<style scoped lang="scss">

</style>
